<template>
  <div class="bg-base-100 border rounded shadow">
    <!-- header -->
    <div class="px-4 py-3 flex justify-between border-b bg-base-200/10">
      <span class="font-bold">
        {{ title }}
      </span>
      <div>
        <slot name="action"></slot>
      </div>
    </div>
    <!-- content -->
    <div class="min-h-40">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        required: true,
      },
    }
  }
</script>
